<template>
	<view>
		<view class="ring">
			<view class="ringi" style="--clr:#012870;"></view>
			<view class="ringi" style="--clr:#1f13b7;"></view>
			<view class="ringi" style="--clr:#52c7ed;"></view>
			<view class="loginForm">
				
				<view class="title">{{projectName}}客户注册</view>
				
				
				
				<view class="passwordLogin verifyLogin">
					<view class="wq-row">
						手机号
					<input type="text" v-model="phone" placeholder="请输入用户名"></input>
					</view>
					<view class="wq-row">
						公司名
					<input type="text" v-model="name" placeholder="请输入公司名称"></input>
					</view>
					<view class="wq-row">
						滑动
						<view class="verify"><wq-verify @blockSuccess="codeCanSend=true"></wq-verify></view>
					</view>
					<view class="wq-row">
						验证码
					<input type="text" class="codeIpt" v-model="code" placeholder="验证码"></input>
					<view>
						<u-toast ref="uToast"></u-toast>
						<u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
						<view class="wqLButton" @tap="getCode">{{tips}}</view>
					</view>
					
					</view>
					<view class="wq-row">
						密&nbsp&nbsp&nbsp&nbsp码
					<input type="password" v-model="password" placeholder="请输入密码"></input>
					</view>
					<view class="wq-row">
					<button class="wq-btn" style="width:100%;" @tap="verifyRegiste">注册</button>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import helper from '../../common/helper';
	import { mixin } from '../../uni_modules/uview-plus';
	import api from '@/api.js'
		export default {
			mixins:[helper],
			data() {
				
				return {
					phone:"",
					password:"",
					codeCanSend:true,
					code:"",
					name:"",
					projectName:"",
					type:1,
					tips:'',
					seconds:60,
					typeList:[
						{
							id:1,
							name:"密码登录"
						},{
							id:2,
							name:"验证码登录"
						}
					]
				}
			},
			methods: {
				changeType(e){
					this.type=e.id;
				},
				codeChange(text) {
					this.tips = text;
				},
				
				verifyRegiste(){
					if(this.phone==''){
						uni.showToast({
							title:"请输入手机号",
							icon:"none"
						})
						return;
					}else if(this.name==''){
						uni.showToast({
							title:"请输入公司名称",
							icon:"none"
						})
						return;
					}else if(this.password==''){
						uni.showToast({
							title:"请输入登录密码",
							icon:"none"
						})
						return;
					}else if(this.code==''){
						uni.showToast({
							title:"请输入验证码",
							icon:"none"
						})
						return;
					}else{
						var data={phone:this.phone,code:this.code,name:this.name,password:this.password};
						api.doRequest('post','login/registe',data).then(res=>{
							if(res.statusCode==200 && res.data.code==200){
								uni.showToast({
									title:"注册成功，请等待管理员审核",
									icon:"none"
								})
								
							
								setTimeout(function(){
									uni.reLaunch({
										url:"/pages/login/login"
									})
								},500);
							}else{
								uni.showToast({
									title:res.data.msg,
									icon:"none"
								})
							}
						})
					}
				},
				getCode() {
					if(this.codeCanSend){
						if (this.$refs.uCode.canGetCode) {
							
								if(this.phone!=""){
									
									var sendData={phone:this.phone}
									
									
									uni.showLoading({
										title: '正在获取验证码'
									})
									api.doRequest("post", "login/sendCode", sendData).then(res => {
										//console.log(res);
									})
									setTimeout(() => {
										uni.hideLoading();
										// 这里此提示会被this.start()方法中的提示覆盖
										uni.showToast('验证码已发送');
										// 通知验证码组件内部开始倒计时
										this.$refs.uCode.start();
									}, 500);
								}
								else{
									uni.showToast({
										title:"请检查您的手机号",
										icon:'none'
									})
								}
							
						} else {
							uni.$u.toast('倒计时结束后再发送');
						}
					}else{
						uni.$u.toast('请拖动滑块后再发送');
					}
					
				},
			},
			inject: ['globalData'],
			onLoad(e){
				uni.setStorageSync('token','');
				const app = getApp();
				this.projectName=this.globalData.name;
			}
			
		}
	</script>
	
	<style>
	.toRegiste{
		width:570upx;
		height:100upx;
		display:flex;
		margin:20upx auto;
		color:#012870;
		align-items: center;
	}
	.verify{
			width:460upx;
		}
	.ring {
	    position: relative;
	    width: 650upx;
	    height: 650upx;
		margin:200upx auto;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}
	.loginForm{
		width:650upx; height:640upx;
		background:rgba(255,255,255,0.9);
		backdrop-filter: blur(5px);
		position:relative;
		border-radius:20upx;
		border:2px solid #eee;
		
	}
	.passwordLogin{
		margin-top:40upx;
	}
	.loginForm .title{
		height:100upx;line-height: 100upx; font-size:20px;color:#004ea2;text-align: center;
	}
	.loginForm:hover{
		box-shadow: 0 0 50upx #eee;
		border:none;
	}
	
	.wq-row{display: flex;width:580upx;align-items: center;margin:20upx auto;justify-content: space-between;}
	.wq-row input{border:1px solid #ccc;height:70upx;border-radius:10upx;width:440upx;background:#fff; padding-left:20upx;}
	.wq-row .codeIpt{width:210upx;}
	.ring .ringi {
	    position: absolute;
	    inset: 0;
	    border: 2px solid #c0c0c0;
	    transition: 0.5s;
	}
	.ring .ringi:nth-child(1) {
	    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
	    animation: animate 6s linear infinite;
	}
	.ring .ringi:nth-child(2) {
	    border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
	    animation: animate 4s linear infinite;
	}
	.ring .ringi:nth-child(3) {
	    border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
	    animation: animate2 10s linear infinite;
	}
	.ring:hover .ringi {
	    border: 6px solid var(--clr);
	    filter: drop-shadow(0 0 20px var(--clr));
	}
	@keyframes animateForm {
	    0%{
	        backdrop-filter: blur(0px);
	        box-shadow: 0px 0px 30px #012870;
	    }
	
	    50%{
	        backdrop-filter: blur(5px);
	        box-shadow:0px 0px 30px #52c7ed;
	    }
	
	    100%{
	        backdrop-filter: blur(3px);
	        box-shadow: 0px 0px 30px #1f13b7;
	    }
	}
	@keyframes animate {
	    0% {
	        transform: rotate(0deg);
	    }
	    100% {
	        transform: rotate(360deg);
	    }
	}
	@keyframes animate2 {
	    0% {
	        transform: rotate(360deg);
	    }
	    100% {
	        transform: rotate(0deg);
	    }
	}
	</style>
